@import "zxx.scss";
@import "./layout/index.scss";
@import "./datepicker.scss";

@import "./theme/common/var.scss";

/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";

.el-dialog__header {
  padding: 20px 0 10px !important;
}

.el-dialog__body {
  border-bottom: 1px solid #f1f1f1;
  border-top: 1px solid #f1f1f1;
  padding: 25px 0 30px !important;
}

.iconcolor {
  color: #409eff;
}

.del {
  color: #ec2234;
}

.layoutbox {
  border-radius: 4px;
  border: 1px solid #f1f1f1;
}

.xmx-table {
  //修改日期组件样式
  table-layout: inherit;
}

.formitemerror {
  //固定气泡
  background-color: #ec2234 !important;
  padding: 4px;

  .popper__arrow {
    border-bottom-color: #ec2234 !important;

    &::after {
      border-bottom-color: #ec2234 !important;
    }
  }
}

//拖拽样式
.drawing-board {
  .component-tag {
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
    background: #f3f9ff !important;
    border-radius: 4px !important;
    border: 1px dashed #1890ff !important;

    .tag {
      display: none;
    }

    .add {
      display: block !important;
      color: #1890ff;
    }
  }

  .elbox {
    border: 1px solid transparent;
    &:hover {
      background-color: #fbfcfd;
      border: 1px dashed #e6e6e6;
    }
  }

  .laybox {
    border: 1px solid transparent;
    &:hover {
      border: 1px dashed #e6e6e6;
      &>.rowdelete {
        opacity: 1;
      }
    }
  }

  .active {
    background-color: #f3f9ff;
    border: 1px dashed #1890ff !important;
    &>.rowdelete {
      opacity: 1;
    }
  }
}

.drawing-btn {
  .component-tag {
    color: #1890ff;
    border-radius: 4px !important;
    border: 1px dashed #1890ff !important;
  }
}

//拖拽样式
.drawing-chosen {
  background-color: #f3f9ff !important;
  border: 1px dashed #1890ff !important;
}

//拖拽样式
.drawing-drag {
  background-color: #f8f9fa !important;
  opacity: 1 !important;
  border: none;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}

// popper长文本样式
.custom-popper {
  max-width: 240px;
}

// popconfirm长文本样式
.custom-popconfirm {
  max-width: 300px;

  .el-popconfirm__main {
    align-items: baseline;
  }
}

// 表格操作项右侧分隔符css实现
.table-actionItem {
  margin: 0 !important;
}
.ul-btn{
  width: 100%;
  padding: 0 17px;
  .li-btn{
    width: 100%;
    text-align: left;
  }
}


.table-actionItem:not(:last-child) {
  &::after {
    content: "";
    position: relative;
    top: -0.06em;
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin: 0 6px;
    vertical-align: middle;
    background: #e8e8e8;
  }
}

// 删除按钮
.link-danger {
  $color: #ec2234;
  color: $color  !important;

  &:hover {
    color: rgba($color, 0.8) !important;
  }
}
.downloadTemplate{
  margin-left: 5px;
  cursor: pointer;
  color: var(--hancode-color);
}
.info-button {
  $color: #909399;
  color: $color  !important;

  &:hover {
    color: rgba($color, 0.8) !important;
  }
}

.success-button {
  $color: #67c23a;
  color: $color  !important;

  &:hover {
    color: rgba($color, 0.8) !important;
  }
}

.warning-button {
  $color: #e6a23c;
  color: $color  !important;

  &:hover {
    color: rgba($color, 0.8) !important;
  }
}

.danger-button {
  $color: #f56c6c;
  color: $color  !important;

  &:hover {
    color: rgba($color, 0.8) !important;
  }
}

// 自定义输入建议样式
.autocomplete--custom {
  ul>li {
    line-height: 20px;
    padding: 5px 10px;

    .header {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .footer {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .footer {
      color: #ddd;
    }
  }
}

// 自定义左侧树样式
.custom-tree {
  &__node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
    width: calc(100% - 24px);
    box-sizing: border-box;
  }

  &__span {
    width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 自定义左侧树高亮样式
  &--highlight-current {
    .el-tree-node.is-current>.el-tree-node__content {
      // background-color: $--color-primary !important;
      background-color: var(--hancode-color) !important;
      color: #fff !important;

      .el-tree-node__expand-icon:not(.is-leaf),
      .el-dropdown {
        color: #fff !important;
      }
    }
  }
}

.header-active {
  background-color: #beddfd !important;
}

//BPM-JS版本跳转
.bjs-powered-by {
  display: none;
}

// 自定义message-box
.custom-message-box {
  margin-top: -30vh;
}

body .el-table th.gutter {
  display: table-cell !important;
}

//重置 vue-datepicker  的popover的z-index
.reset-date-picker-zindex {
  z-index: 9000;
}

//全局滚动条样式优化
::-webkit-scrollbar-track-piece {
  background-color: #fff;
  -webkit-border-radius: 0;
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-thumb {
  height: 50px;
  -webkit-border-radius: 6px;
  outline: 2px solid #fff;
  outline-offset: -2px;
  filter: alpha(opacity=50);
  -moz-opacity: 0.4;
  -khtml-opacity: 0.4;
  opacity: 0.4;
	border-style: dashed;
	border-color: transparent;
	border-width: 4px;
	background-color: rgba(157, 165, 183,0.4);
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(157, 165, 183, 0.7);
}

.permission__button--hidden {
  display: none;
}

.rotate90 {
  transform: rotate(90deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.rotate270 {
  transform: rotate(270deg);
}

.fullscreen {
  object-fit: contain;
  user-select: text;
  position: fixed !important;
  top: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  box-sizing: border-box !important;
  min-width: 0px !important;
  max-width: none !important;
  min-height: 0px !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0px !important;
  z-index: 99;
}
